<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
  <!--  <a href="#/login">点我登陆</a> -->
  <!--  <a href="#/register">点我注册</a> -->

    <!--router-link 好处：书写路径不需要#  tag 渲染 标签：为button span 。。。。-->
    <!--通过?的形式的传参-->
    <router-link to="/login?id=16" tag="button">我要登录</router-link>
    <!--通过springmvc 路径变量来传参 对应的路由路径也要改 加/参数名 -->
    <router-link to="/register/16" tag="button">我要注册</router-link>


    <router-view></router-view>
</div>

<script src="./js/vue.js"></script>
<script src="./js/vue-router.js"></script>
<script>
   //声明组件模板
   const login={
       template:"<div>用户登录 {{this.$route.query.id}}</div>",
       data(){
           return {};
       },
       methods: {},
       created()
       {
           console.log(this.$route.query.id);
       }
   }

   const register={
       template: "<div>用户注册{{$route.params.id}}</div>",
       data() {
           return {};
       },
       methods:{},
       created() {
           console.log(this.$route.params.id);
       }
   }

   //创建有个路由
   const router =new VueRouter({
       routes:[
           {path:'/login',component:login},
           {path: '/register/:id',component: register}
       ]
   })

   const app = new Vue(
        {
            el: "#app",
            data: {},
            methods: {},
            router:router



        }
    )
</script>
</body>
</html>